<template>
  <transition name="slide">
    <div class="list">
      <van-nav-bar title="功能选择" leftText="返回" rightText="" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <!-- 已选择icon项 -->
			<div class="choosedIcon">
				<p class="IconNav">已选择的功能项({{ chooseIcon.length }}/7)
					<span class="replaceIcon" v-if="!toggleBtn" @click="changeBtn">更换</span>
					<span class="replaceIcon" v-if="toggleBtn" @click="confirmBtn">确定</span>
				</p>
				
				<!-- <div > -->
					<transition-group name="iconList" tag="div" class="IconContent">
						<div  class="icon-btn" v-for="(item,index) in chooseIcon" :key="index" @click="detailPage1(index)">
							<div :class="activeIcon" @click="wipeIcon($event,index)">
								<i class="iconfont" :class="item.imgFontClass"></i>
								<p>{{ item.name}}</p>
								<div class="IconCircle" v-if="isShowcircle">
									<p class="fillIcon" v-if="!item.flag"></p>
									<p class="minusIcon" v-if="item.flag"></p>
								</div>
							</div>
						</div>
					</transition-group>		
				<!-- </div> -->
			</div>
			<!-- 更多功能icon -->
			<div class="moreIconNav">
				<!-- 校园生活部分 -->
				<p class="IconNav">校园生活</p>
				<div class="IconContent" id="schoolLife">
					<div v-for="(item,index) in schoolLifeIcon" class="icon-btn" :key="index" @click="addIcon1(index),detailPage2(index)" >
						<div :class="activeIcon">
							<i  :class="item.imgFontClass" class="iconfont"></i>
							<p>{{ item.name }}</p>
							<div class="IconCircle" v-if="isShowcircle">
								<p class="fillIcon" v-if="!item.flag"></p>
								<p class="minusIcon" v-if="item.flag"></p>
							</div>
						</div>
					</div>
				</div>
				<!-- 学校部分 -->
				<p class="IconNav">学校相关</p>
				<div class="IconContent" id="aboutSchool">
					<div class="icon-btn" v-for="(item,index) in aboutSchoolIcon" :key="index" @click="addIcon2(index),detailPage3(index)">
						<div :class="activeIcon">
							<i :class="item.imgFontClass" class="iconfont"></i>
							<p>{{ item.name }}</p>
							<div class="IconCircle" v-if="isShowcircle">
								<p class="fillIcon" v-if="!item.flag"></p>
								<p class="minusIcon" v-if="item.flag"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
    </div>
  </transition>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { NoticeBar } from "vant";
import { Popup } from "vant";
import { Card } from "vant";
import { Toast } from "mint-ui";

Vue.use(Card);
Vue.use(Popup);
Vue.use(NoticeBar);
Vue.use(Swipe).use(SwipeItem);

export default {
  data() {
    return {
      count: 0,
      isLoading: false,
      show: false,
      toggleBtn: false,
      isShowcircle: false,
      activeIcon: "",
      warnToast: false,
      imgUrl: {
        url:
          "//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
      },
      chooseIcon:[],
      choosingIcon: [
        {
          name: "西电新闻",
          EnName: "news",
          imgFontClass: "icon-news",
          flag: true
        },
        {
          name: "学生课表",
          EnName: "schedule",
          imgFontClass: "icon-kebiaoxinxi",
          flag: true
        },
        // {
        //   name: "地图查询",
        //   EnName: "map",
        //   imgFontClass: "icon-ditu",
        //   flag: true
        // },
        // {
        //   name: "生活服务",
        //   EnName: "lifeServe",
        //   imgFontClass: "icon-shenghuofuwu",
        //   flag: true
        // },
        // {
        //   name: "校园交易",
        //   EnName: "deal",
        //   imgFontClass: "icon-iconfontzhizuobiaozhunbduan27",
        //   flag: false
        // },
        {
          name: "校园招聘",
          EnName: "jobs",
          imgFontClass: "icon-zhaopin",
          flag: true
        },
        {
          name: "成绩查询",
          EnName: "score",
          imgFontClass: "icon-genjufenshuxuandaxuen",
          flag: true
        },
        {
          name: "校内电话",
          EnName: "phone",
          imgFontClass: "icon-dianhua",
          flag: true
        },
        {
          name: "校车时刻",
          EnName: "carList",
          imgFontClass: "icon-bus",
          flag: true
        }
      ],
      schoolLifeIcon: [
        {
          name: "失物招领",
          EnName: "LostProperty",
          imgFontClass: "icon-shiwuzhaoling",
          flag: false
        },
        {
          name: "校园一卡通",
          EnName: "MetroCard",
          imgFontClass: "icon-yinhangqia",
          flag: false
        },
        {
          name: "学生课表",
          EnName: "schedule",
          imgFontClass: "icon-kebiaoxinxi",
          flag: true
        },
        {
          name: "成绩查询",
          EnName: "score",
          imgFontClass: "icon-genjufenshuxuandaxuen",
          flag: true
        },
        {
          name: "校车时刻",
          EnName: "carList",
          imgFontClass: "icon-bus",
          flag: true
        },
        {
          name: "校园交易",
          EnName: "deal",
          imgFontClass: "icon-iconfontzhizuobiaozhunbduan27",
          flag: false
        },
        {
          name: "校园招聘",
          EnName: "jobs",
          imgFontClass: "icon-zhaopin",
          flag: true
        },
        {
          name: "流量查询",
          EnName: "flow",
          imgFontClass: "icon-liuliangtongji",
          flag: true
        }
      ],
      aboutSchoolIcon: [
        {
          name: "校内电话",
          EnName: "phone",
          imgFontClass: "icon-dianhua",
          flag: true
        },
        {
          name: "地图查询",
          EnName: "map",
          imgFontClass: "icon-ditu",
          flag: false
        },
        {
          name: "西电新闻",
          EnName: "news",
          imgFontClass: "icon-news",
          flag: true
        },
        {
          name: "生活服务",
          EnName: "lifeServe",
          imgFontClass: "icon-shenghuofuwu",
          flag: false
        },
        {
          name: "西电学术",
          EnName: "academic",
          imgFontClass: "icon-xiezuo",
          flag: false
        },
        {
          name: "西电官微",
          imgFontClass: "icon-weibo",
          flag: false
        },
        {
          name: "后勤维修",
          imgFontClass: "icon-weixiu",
          flag: false
        }
      ]
    };
  },
  created() {
    let chooseArray = []
    for(let a of this.schoolLifeIcon){
    	if(a.flag){
    		chooseArray.push(a)
    	}
    }
    for(let b of this.aboutSchoolIcon){
    	if(b.flag){
    		chooseArray.push(b)
    	}
    }
		this.chooseIcon = window.data.chooseIcon = chooseArray
  },
  beforeUpdate() {
    if (this.chooseIcon.length >= 7) {
      this.overNumber = true;
      console.log("over");
		}
  },
  methods: {
    // moreIcon() {
    //   // this.show = true
    //   // this.$router.go('feature')
    //   this.$router.push({ path: "/feature" });
    // },
    onClickLeft() {
      this.$router.go(-1);
      this.show = false;
      this.toggleBtn = false;
      this.isShowcircle = false;
      this.activeIcon = "";
      window.data.chooseIcon = this.chooseIcon;
      // console.log(window.data.chooseIcon);
    },
    onClickRight() {
      this.show = false;
      this.toggleBtn = false;
      this.isShowcircle = false;
      this.activeIcon = "";
      window.data.chooseIcon = this.chooseIcon;
    },
    confirmBtn() {
      this.toggleBtn = !this.toggleBtn;
      this.isShowcircle = !this.isShowcircle;
      this.activeIcon = "";
    },
    changeBtn() {
      this.toggleBtn = !this.toggleBtn;
      this.isShowcircle = !this.isShowcircle;
      this.activeIcon = "activeIcon";
    },
    toggleIcon(index) {
      this.schoolLifeIcon[index].flag = !this.schoolLifeIcon[index].flag;
    },
    toggleIcon1(index) {
      this.aboutSchoolIcon[index].flag = !this.aboutSchoolIcon[index].flag;
    },
    detailPage1(index) {
      //路由跳转
      // console.log(this.chooseIcon[index].EnName);
      if (this.activeIcon) return;
      this.$router.push("/index/" + this.chooseIcon[index].EnName + "Detail");
    },
    detailPage2(index) {
      //路由跳转
      // console.log(this.schoolLifeIcon[index].EnName);
      if (this.activeIcon) return;
      this.$router.push("/index/" + this.schoolLifeIcon[index].EnName + "Detail");
    },
    detailPage3(index) {
      //路由跳转
      // console.log(this.aboutSchoolIcon[index].EnName);
      if (this.activeIcon) return;
      this.$router.push("/index/" + this.aboutSchoolIcon[index].EnName + "Detail");
    },
    wipeIcon(event, index) {
      if (this.activeIcon) {
				event.cancelBubble = true;
				this.overNumber = false;
        let a = this.chooseIcon.splice(index, 1);
        // console.log(a[0].name)
        for (let value of this.schoolLifeIcon) {
          if (value.name == a[0].name) {
            value.flag = !value.flag;
          }
        }
        for (let value of this.aboutSchoolIcon) {
          if (value.name == a[0].name) {
            value.flag = !value.flag;
          }
        }
      }
    },
    addIcon1(index) {
      if (!this.activeIcon) return;
      if (this.schoolLifeIcon[index].flag) {
        //当icon为减号时，可执行减少操作，overNumber失效
        this.overNumber = false;
        this.warnToast = false;
        // console.log(this.chooseIcon);
        let m = this.chooseIcon.indexOf(this.schoolLifeIcon[index]);
        let a = this.chooseIcon.splice(m, 1);
      }
      if (this.overNumber) {
        this.warnToast = true;
        
        Toast("可选择的功能项已满~");
        return;
      }
      if (!this.schoolLifeIcon[index].flag) {
        this.chooseIcon.push(this.schoolLifeIcon[index]);
        // this.toggleIcon(index)
      }
      this.toggleIcon(index);
    },
    addIcon2(index) {
      if (!this.activeIcon) return;
      if (this.aboutSchoolIcon[index].flag) {
        //当icon为减号时，可执行减少操作，overNumber失效
        this.overNumber = false;
        this.warnToast = false;

        let m = this.chooseIcon.indexOf(this.aboutSchoolIcon[index]);
        this.chooseIcon.splice(m, 1);
      }
      if (this.overNumber) {
        this.warnToast = true;
        
        Toast("可选择的功能项已满~");
        return;
      }
      if (!this.aboutSchoolIcon[index].flag) {
        this.chooseIcon.push(this.aboutSchoolIcon[index]);
        // this.toggleIcon(index)
      }
      this.toggleIcon1(index);

      // if(this.aboutSchoolIcon[index].flag){
      // 	this.chooseIcon.push(this.aboutSchoolIcon[index])
      // }else{
      // 	let m = this.chooseIcon.indexOf(this.aboutSchoolIcon[index])
      // 	this.chooseIcon.splice(m,1)
      // }
    },
    
    onClickRight() {
      this.$router.push("/login/mint-pull");
    }
  },
  watch: {}
};
</script>

<style lang="less">
@import "../assets/less/baseDetail.less";
</style>
<style scoped>
/* @import url(//at.alicdn.com/t/font_615648_hhvoa5zm9z52ke29.css); */
.swiper {
  width: 100%;
  height: 180px;
}
.swiper img {
  width: 100%;
  height: 200px;
}
.van-news-bar {
  margin-top: 3px;
  padding-left: 25px;
}
.swiperNews {
  position: relative;
}
.notice {
  position: absolute;
  left: 0;
  top: 5px;
  width: 25px;
  height: 25px;
}

/* 图标列表 */
/* .icon-all {
  width: 100%;
  height: 150px;
  height:150px;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} */
i {
  display: block;
  font-size: 30px;
  text-align: center;
  margin-top: 3px;
}
.icon-btn {
  width: 25%;
  height: 65px;
  position: relative;
  text-align: center;
  margin-top: 10px;

}
.icon-btn .activeIcon {
  width: 85%;
  height: 60px;
  border-radius: 7px;
  background: #eee;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding-top: 5px;
}

.fillIcon,
.minusIcon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 6%;
}
.fillIcon {
  background: url("../assets/img/fill.png") top/12px no-repeat;
}
.minusIcon {
  background: url("../assets/img/minus.png") top/12px no-repeat;
}
/* .icon-btn:hover{
	background: #eee;
} */
.icon-btn p {
  font-size: 12px;
  margin-top: 6px;
  /* position: absolute;
	bottom: 2px;
	left: 0; */
}
.icon-news {
  color: blue;
}
.icon-kebiaoxinxi {
  color: orange;
}
.icon-ditu {
  color: mediumspringgreen;
}
.icon-shenghuofuwu {
  color: maroon;
}
.icon-iconfontzhizuobiaozhunbduan27 {
  color: magenta;
}
.icon-dianhua {
  color: rgb(22, 115, 236);
}
.icon-bus {
  color: darkblue;
}
.icon-gengduo {
  color: red;
}
.icon-genjufenshuxuandaxuen {
  color: blueviolet;
}
.icon-shiwuzhaoling {
  color: rgb(180, 109, 232);
}
.icon-zhaopin{
  color: red;
}
.icon-liuliangtongji{
  color: rgb(68, 187, 0);
}
.icon-xiezuo {
  color: greenyellow;
}
.icon-yinhangqia {
  color: rgb(22, 115, 236);
}
.icon-weibo {
  color: red;
}
.icon-weixiu {
  color: rgb(180, 109, 232);
}
.Popright {
  width: 100%;
  height: 100%;
  background: #eee;
}
/* icon浮层 */
.IconNav {
  width: 100%;
  height: 35px;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  line-height: 35px;
  padding-left: 10px;
  background: white;
  margin-top: 2px;
}
.IconNav .replaceIcon {
  float: right;
  margin-right: 15px;
  color: blue;
}
.IconContent {
  width: 100%;
  height: 160px;
  background: white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
/* 列表过渡效果 */
.icon-btn {
  transition: all 0.7s;
  display: inline-block;
  margin-right: 0px;
}
.iconList-enter, .iconList-leave-to{
  opacity: 0;
  transform: translateY(30px);
}
.iconList-leave-active {
  position: absolute;
}
/* 近日新闻 */
.newsInfo {
  width: 100%;
  height: 300px;
  margin-top: 10px;
  background: white;
}
.newsInfo .newsInfo-nav {
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.newsInfo .newsInfo-nav .news-title {
  width: 80px;
  float: left;
  padding-left: 10px;
}
.moreNews {
  float: right;
  padding-right: 6px;
}

.news-item {
  background: white;
  border-bottom: 1px solid #ccc;
  margin-top: 5px;
}
.news-time {
  float: left;
  font-size: 14px;
  color: #999;
  margin-right: 90px;
}
.news-hits {
  float: right;
  color: #999;
  font-size: 14px;
}
</style>